<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <el-col :span="7">
        <card title="分类商品数量(饼图)">
          <pie-echart
            seriesName="数量"
            :pieData="goodsCategoryCount"
          ></pie-echart>
        </card>
      </el-col>
      <el-col :span="10">
        <card title="不同城市商品销量">
          <map-echart :mapData="addressScale"></map-echart>
        </card>
      </el-col>
      <el-col :span="7">
        <card title="分类商品数量(玫瑰图)">
          <rose-echart
            seriesName="数量"
            :roseData="goodsCategoryCount"
          ></rose-echart>
        </card>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="echart-bottom">
      <el-col :span="12">
        <card title="分类商品的销量">
          <line-echart
            v-bind="goodsCategorySale"
            seriesName="销量"
          ></line-echart>
        </card>
      </el-col>
      <el-col :span="12">
        <card title="分类商品的收藏">
          <bar-echart
            v-bind="goodsCategoryFavor"
            seriesName="收藏"
          ></bar-echart>
        </card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import { useStore } from "@/store";
import Card from "@/components/card";
import {
  PieEchart,
  RoseEchart,
  LineEchart,
  BarEchart,
  MapEchart
} from "@/components/echart";

export default defineComponent({
  name: "dashboard",
  components: {
    Card,
    PieEchart,
    RoseEchart,
    LineEchart,
    BarEchart,
    MapEchart
  },
  setup() {
    const store = useStore();
    store.dispatch("analysis/getDashboardPageDataAction");
    const goodsSaleOption = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)"
          }
        }
      ]
    };
    const goodsCategoryCount = computed(() => {
      return store.state.analysis.categoryGoodsCount.map((item) => {
        return { name: item.name, value: item.goodsCount };
      });
    });
    const goodsCategorySale = computed(() => {
      const xAxisData = store.state.analysis.categoryGoodsSale.map(
        (item) => item.name
      );
      const yAxisData = store.state.analysis.categoryGoodsSale.map(
        (item) => item.goodsCount
      );
      return { xAxisData, yAxisData };
    });
    const goodsCategoryFavor = computed(() => {
      const xAxisData = store.state.analysis.categoryGoodsFavor.map(
        (item) => item.name
      );
      const yAxisData = store.state.analysis.categoryGoodsFavor.map(
        (item) => item.goodsFavor
      );
      return { xAxisData, yAxisData };
    });
    const addressScale = computed(() => {
      return store.state.analysis.addressGoodsSale.map((item) => {
        return {
          name: item.address,
          value: item.count
        };
      });
    });

    return {
      goodsSaleOption,
      goodsCategoryCount,
      goodsCategorySale,
      goodsCategoryFavor,
      addressScale
    };
  }
});
</script>

<style scoped lang="less">
.echart-bottom {
  margin-top: 10px;
}
</style>
